<template>
    <div class="user row mt-5">
        <div class="col-12 row mt-5">
            <img src="./../assets/logo.jpg" alt="" class="col-6">
            <div class="col-5">
                <h6 class="fs-3">用户名：{{users.username}}</h6>
                <h6 class="fs-5 mt-5">密码：{{users.password}}</h6>
                <h6 class="fs-5">电话：{{users.tel}}</h6>
                <h6 class="fs-5">邮箱{{users.email}}</h6>
                <span class="fs-5">收货地址：</span><input type="text" v-model="users.address">
            </div>
            
        </div>
        <div class="col-12">
            <router-link to="/cart" ><button>我的购物车</button></router-link>
            <router-link to="/order" ><button>我的订单</button></router-link>
            <button @click="loginOut">注销</button>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return{
            users:{}
        }
    },
    created(){
        if(!this.$store.state.userInfo.username){
            this.$router.push({
                path: '/'
            })
        }
       console.log(this.$route.params.id) 
       axios.get(`http://127.0.0.1:4523/m1/1263105-0-default//user`).then(
            (res)=>{
            this.users=res.data.users;
            this.users.forEach(item => {
               if(item.username===this.$route.params.id){
                    this.users=item
               } 
            });
            console.log(this.users)
            }
        ).catch((error)=>{
            console.log(error)
        })
    },
    methods:{
        loginOut(){
            this.$store.commit("loginOut")
            window.sessionStorage.removeItem('userInfo')
            this.$router.push('/')
            }
    }
    
}
</script>
<style scoped>
    .user{
        width: 1000px;
        height: 500px;
        margin: 0 auto;
        background-image: url(./../assets/bg.jpg);
        background-repeat: no-repeat;
    }
    .user .col-12:nth-child(2){
        height: 100px;
    }
    .user .col-12 button{
        width: 300px;
        height: 50px;
        line-height: 50px;
        background-color: #bce1f6;
        border: none;
        float: left;
        border-radius: 10px;
        margin: 10px;
    }
    .user .col-12 button:hover{
        border: 2px solid gray;
    }
</style>
